<!DOCTYPE html>
<html>
<head>
    <title>文章编辑</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <!-- 引入相关js文件 -->
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/third-party/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/a92d301d77.js"> </script>
        <!-- 引入相关css文件 -->
        <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/plugins/edit135/themes/96619a5672.css" />
</head>
<body>
<style>

</style>
<div  class="panel panel-default" id="rrapp" v-cloak>
    <div class="panel-heading" >文章标题：{{bArticleInfo.articleTitle}}</div>
    <form class="form-horizontal">

        <div class="form-group" style="display: none;">
            <div class="col-sm-2 control-label" style="color: red;">品牌</div>
            <div class="col-sm-10">
                <input class="form-control" list="editBrandNames" placeholder="品牌" id="brandName">
                <datalist id="editBrandNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group" style="display: none;">
            <div class="col-sm-2 control-label" style="color: red;">分类</div>
            <div class="col-sm-10">
                <input class="form-control" list="editTypeNames" placeholder="分类" id="articleTypeName">
                <datalist id="editTypeNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">文章标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bArticleInfo.articleTitle" id="articleTitle" name="articleTitle" placeholder="文章标题"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">分享配文</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bArticleInfo.articleBrief" id="articleBrief" name="articleBrief" placeholder="分享配文"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">封面图片</div>
            <div class="col-sm-10">
                <img id="articleThumbnail" width="100px" height="100px" />
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file"  class="form-control" id='uploadImg' onchange="inserttx(this)"/>
            </div>
        </div>


<!--        <div class="form-group">-->
<!--            <div class="col-sm-2 control-label">热度类型</div>-->
<!--            <div class="col-sm-10">-->
<!--                <label class="radio-inline">-->
<!--                    <input type="radio" name="hotType" value="0" v-model="bArticleInfo.hotType"  /> 随机-->
<!--                </label>-->
<!--                <label class="radio-inline">-->
<!--                    <input type="radio" name="hotType" value="1" v-model="bArticleInfo.hotType" /> 自定义-->
<!--                </label>-->
<!--                <input type="text" class="form-control" v-model="bArticleInfo.articleHotScore" id="articleHotScore" name="articleHotScore" placeholder="热度值"/>-->
<!--            </div>-->
<!--        </div>-->

        <div class="form-group">
            <script id="editor" type="text/plain" style="width:1024px;"></script>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="updateInfo" value="保存"/>
            <input onclick='window.close();' type="button" value="关闭" class="rrapp-but" style="background-color: #f0ad4e;border-color: #f0ad4e;color: #fff"/>
        </div>
    </form>
</div>
<script>
        var appkey = '5e0d699a-3170-4210-b676-6dbbac10c65d';
        window.BASEURL = 'http://www.135editor.com';
        window.UEDITOR_HOME_URL = "/ueditor/jsp/upload/image/";
        window.current_editor = UE.getEditor('editor',{
            plat_host:'www.135editor.com',
            appkey:appkey,open_editor:true,pageLoad:true,
            style_url : BASEURL+'/editor_styles/open?inajax=1&appkey=' + appkey,
            style_width:340,
            uploadFormData:{'referer': window.document.referrer},

            initialFrameHeight:680,
            zIndex : 1000,
            focus:true,
            autoFloatEnabled:false,autoHeightEnabled:false,scaleEnabled:false,
            focusInEnd:true
        });

        //编辑器加载完成之后
        window.current_editor.addListener( 'ready', function( editor ) {
            var url = location.search;
            var articleId = url.split("=")[1];
            if(articleId!=0){
                loadData(articleId);
            }
        } );

        $(function () {



        })

        function loadData(e) {
            console.log("e:"+e);
            $.get(baseURL + "sys/pythonarticleinfo/info/"+e, function(r){
                vm.bArticleInfo=r.bArticleInfo;
                //console.log(r.bArticleInfo);
                $("#articleThumbnail").attr("src",vm.bArticleInfo.articleThumbnail);

                var a=r.bArticleInfo.articleContent;
                //console.log("Content Load:"+a);
                window.current_editor.setContent(a);

                $.ajax({
                    type: "POST",
                    async:false,
                    url: baseURL + 'sys/bbrandinfo/queryAll',
                    contentType: "application/json",
                    success: function(r){
                        if(r.code==0){
                            vm.bbrandinfo=r.brandInfo;
//                        for(i=0;i<r.brandInfo.length;i++){
//                            $("#articleBrandId").append(
//                                "<option value='" + r.brandInfo[i].id + "'>"+ r.brandInfo[i].brandName +"</option>");
//                        }
                            debugger;
                            for(var i=0;i<r.brandInfo.length;i++){
                                $("#editBrandNames").append(
                                    "<option value=" + r.brandInfo[i].brandName +">"+"</option>");

                                if(vm.bArticleInfo.brandName==r.brandInfo[i].brandName){
                                    $("#brandName").val(vm.bArticleInfo.brandName);
                                }
                            }
                        }
                    }
                });

                $.ajax({
                    type: "POST",
                    async:false,
                    url: baseURL + 'sys/barticletypeinfo/queryAll',
                    contentType: "application/json",
                    success: function(r){
                        if(r.code==0){
                            debugger;
                            //vm.bbrandinfo=r.brandInfo;
                            for(var i=0;i<r.barticletypeinfo.length;i++){

                                $("#editTypeNames").append(
                                    "<option value=" + r.barticletypeinfo[i].articleTypeName +" >"+"</option>");

                                if(vm.bArticleInfo.brandName==r.barticletypeinfo[i].articleTypeName){
                                    $("#articleTypeName").val(vm.bArticleInfo.brandName);
                                }
                            }
                        }
                    }
                });

            })
        }

        function upload(file, pathname = 'ps') {
            console.log(file);
            const client = new window.OSS({
                region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
                accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
                accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
                bucket: 'zktuistatic'
            });
            var date = new Date();
            var yeaer = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var datePath =yeaer+""+month+""+day;
            var key = "";
            key=pathname+"/"+datePath+"/image"+String(parseInt(Math.random() * 10000000, 10)+getFileExtendingName(file.name));
            client.put(key, file).then(function () {
                return client.get(key);
            }).then(function(ret) {
                console.log(ret.res.requestUrls[0]);
                vm.bArticleInfo.articleThumbnail=ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/","http://zktfile.wxslzf.com/");
                $("#articleThumbnail").attr("src",vm.bArticleInfo.articleThumbnail);

            }).catch(function(err) {
                console.log(err);
            });
        }
        function inserttx(e) {
            var files = e.files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
//            for (var i = 0; i < length; i++) {
//                var fr = new FileReader();
//                fr.onload = function (e) {
//                    console.log("回显了图片");
//                    console.log(this.result);
//                }
//                fr.readAsDataURL(files[i]); //读取文件
//            }
            upload(files[0]);
        }

        function getFileExtendingName (filename) {
            // 文件扩展名匹配正则
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(filename);
            if (matches) {
                return matches[0];
            }
            return '';
        }

            function test(){
                var url = location.search;
                var articleId = url.split("=")[1];
                loadData(articleId);
            }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/pythonarticleinfo.js?_${.now?long}"></script>
</body>
</html>